<template>
    <div class="app-container">
        <el-dialog :visible="dialogVisible" :title="formatTitle" @close="cancel">
            <el-form v-if="titleNum==1" label-position="right" label-width="100px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'会员类型'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="memberType"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'总音符'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.totalBalance"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'已使用音符'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.totalBalance_balance"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'剩余音符'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.balance"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'企业负责人'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.companyManager"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'负责人邮箱'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.managerEmail"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'负责人电话'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.managerTel"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'公司地址'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="userData.companyAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'状态'" prop="" >
                            <el-input :disabled="titleNum==1" v-model="statusFilter"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="'注册日期'" prop="" >
                            <el-input :disabled="titleNum==1" :readonly="titleNum==1" v-model="userData.create_time"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
<!-- 

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="标签：" prop="" >
                            <el-select  class="select" :disabled="titleNum==1" v-model="userData.tag" placeholder="请选择">
                                <el-option label="农产品" value="0"/>
                                <el-option label="贴剂" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="状态：" prop="" >
                            <el-select class="select" :disabled="titleNum==1" v-model="userData.status" placeholder="请选择">
                                <el-option label="农产品" value="0"/>
                                <el-option label="贴剂" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <div class="btns">
                    <el-button v-if="titleNum===0" type="info" @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm">确定</el-button>
                </div>
             </el-form>
             
<!-----------添加----------------------------------------------------------------------------------------------------------------------------->
             <el-form v-if="titleNum==0" label-position="right" label-width="100px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="账号：" prop="userId">
                            <el-input v-model="addUserForm.account" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="昵称：" prop="">
                            <el-input v-model="addUserForm.nickname" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="会员类型：" prop="">
                            <el-select v-model="addUserForm.type" placeholder="请选择">
                                <el-option label="个人" :value="0"/>
                                <el-option label="企业" :value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="状态：" prop="">
                            <el-select v-model="addUserForm.state" placeholder="请选择">
                                <el-option label="启用" :value="0"/>
                                <el-option label="停用" :value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="总余额：" prop="">
                            <el-input v-model="addUserForm.balance" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="btns">
                    <el-button v-if="titleNum===0" type="info" @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm">确定</el-button>
                </div>
             </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            musicStyleForm: {
                name: '',
                tag: '',
                status: 0
            },
            addUserForm: {
                account:'',
                nickname: '',
                type: '',
                state: '',
                balance: ''
            }
        }
    },
    props: {
        titleNum: { // 0添加，1查看，2编辑
            type: Number,
            required: true
        },
        userData: {
            type: Object,
            required: true
        },
        dialogVisible: {
            type: Boolean,
            required: true
        }
    },
    mounted() {
        console.log(this.titleNum)
    },
    computed: {
        formatTitle() {
            const titles = {
                0: '添加',
                1: '查看',
                2: '编辑',
                3: '删除'
            }
            return titles[this.titleNum]
            // return this.ditaillist.status === 1 ? '启用' : '禁用'
        },
        memberType() {
            const map = {
                0: '个人',
                1: '企业'
            }
            return map[this.userData.type]
        },
        statusFilter() {
            const statusMap = {
                0: '启用',
                1: '停用'
            }
            return statusMap[this.userData.state]
        },
    },
    methods: {
        cancel() {
            this.$emit('update:dialogVisible', false)
            // this.$message({
            //     type: 'info',
            //     message: '取消修改'
            // });
        },
        confirm() {

            
            this.$emit('update:dialogVisible', false)
            if (titleNum !== 1) {
                this.$emit('sendData', this.addUserForm )
            }
            
        },
        del() {
            
        },

    },
    watch: {
        myindex(val) {
            console.log('index变了', val)
            this.musicStyleForm = Object.assign(this.musicStyleList,{})
            
        }
    }
}
</script>

<style>
.btns {
    margin-top: 20px;
    display: flex;
    justify-content: right;
}

.select {
    width: 100%;
}
</style>